.horizontal-dots {
    &.outside-dots {
        &.top-dots {
            .dots {
                // responsive
                @media(max-width: 359px) {
                    margin: 0 0 7px 0;
                }
                @media(min-width: 360px) and (max-width: 767.9px) {
                    margin: 0 0 7px 0;
                }
                @media(min-width: 768px) and (max-width: 991.9px) {
                    margin: 0 0 8px 0;
                }
                @media(min-width: 992px) and (max-width: 1199.9px) {
                    margin: 0 0 5px 0;
                }
                @media(min-width: 1200px) {
                    margin: 0 0 10px 0;
                }
            }
        }
    }
    &.inside-dots {
        &.top-dots {
            .dots {
                @media(max-width: 359px) {
                    top: 5px;
                }

                @media(min-width: 360px) and (max-width: 767.9px) {
                    top: 5px;
                }
                @media(min-width: 768px) and (max-width: 991.9px) {
                    top: 7px;
                }
                @media(min-width: 992px) and (max-width: 1199.9px) {
                    top: 13px;
                }
                @media(min-width: 1200px) {
                    top: 19px;
                }
            }
        }
    }
}
.vertical-dots {
    &.top-dots {
        .dots {
            justify-content: flex-start;
        }
    }
}
